<template>
  <div id="tourNote">
        <el-row>
			<el-form :model="tourNoteForm" label-width="100px" @close="resetForms('ruleForm')" :rules="rules" ref="tourNoteForm">
				<el-form-item label="输入标题：" :label-width="formLabelWidthTextArea" style="margin-top:120px;" prop="title">
					<el-input 
						placeholder="涵盖目的地、主题、旅游亮点等更吸引人"
						v-model="tourNoteForm.title"
						maxlength="40" 
						show-word-limit
						style="width:450px"
						>
					</el-input>
				</el-form-item>
				<el-form-item label="城市名称" :label-width="formLabelWidth" prop="cityId">
					<el-select v-model="tourNoteForm.provinceId"  placeholder="请选择省份" @change="getNameByPidCity()" >
						<el-option
						v-for="item in provincess"
						:key="item.id"
						:label="item.name"
						:value="item.id">
						</el-option>
					</el-select>
					<!-- 市下拉框 -->
					<el-select v-model="tourNoteForm.cityId" placeholder="请选择市">
						<el-option
						v-for="item in citys"
						:key="item.id"
						:label="item.name"
						:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				 <el-form-item label="封面图设置：" :label-width="formLabelWidthAuthor" class="tourNoteImage">  
					<div class="yangshi">
						<el-upload class="avatar-uploader" action="" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="imageUrl" :src="imageUrl" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
					</div>
				</el-form-item>
				<div class="body">
					<quill-editor ref="text" v-model="tourNoteForm.textContent" class="editor" :options="editorOption"/>
				</div>
				<div>
					<el-button type="primary" @click="saveTourNote" style="margin-top:60px;margin-left:45%">提交</el-button>
				</div>
			</el-form>
        </el-row>
  </div>
</template>

<script>
const axios = require('axios')
export default {
	inject:['reload'],
    name: 'TourNoteViews',
    data () {
        return {
			// 用户信息集合
			userAllList:[],
			// 用户头像id
			userAvatarId:'',
			// 登录名称
			userName:'',
			// 用户id
			authorId:'',
			tourNoteForm:{ // 输入框集合
				id: 0,
				title:'',
				author:'',
				textContent:'',
				releaseTypeId:1,
				delFlag: 0,
				views: 0,
				avatarId: "",
				userId:'',
			},
			imageUrl: '', // 存放图片
			imageFile: File,
			editorOption: {},
			formLabelWidthTextArea: '120px', // 标题输入框长度
			formLabelWidth: '120px', // 作者输入框长度
			formLabelWidthAuthor: '120px',
			// 新增时市数组
			citys: [], 
			// 默认查询省数组
			provincess: [], 
			// 城市父id
			pid:'',
			// 校验规则
			rules: {
				title: [
					{ required: true, message: '请填写您的标题', trigger: 'blur' },
				],
			}
        }
    },
	mounted(){
		// 从头部获取登录名称
		this.loginName = window.sessionStorage.getItem('loginName')
		// 从头部获取用户头像id
		this.userAvatarId = window.sessionStorage.getItem('avatarId')
		// 根据pid查询省信息
		this.getNameByPidMoren()
	},
    methods: {	
		// 根据pid查询省信息
		getNameByPidMoren () {
			this.pId = 0
			axios.get('http://127.0.0.1:8082/area/getNameByPid?pId=' + this.pId).then(res => {
				this.provincess = res.data.obj
			})
		},
		// 新增根据provinceId查询市信息
		getNameByPidCity () {
			axios.get('http://127.0.0.1:8082/area/getNameByPid?pId=' + this.tourNoteForm.provinceId).then(res => {
				this.citys = res.data.obj
			})
		},
		// 新增成功之后清空输入框数据
		resetForms (formName) {
			this.$refs[formName].resetFields()
		},
		// 新增游记信息
		saveTourNote(){
			this.userName = window.sessionStorage.getItem('userName')
			this.authorId = window.sessionStorage.getItem('id')
			var formdata = new FormData()
			formdata.set('author', this.userName)
			formdata.set('title', this.tourNoteForm.title)
			formdata.set('textContent', this.tourNoteForm.textContent)
			formdata.set('delFlag', this.tourNoteForm.delFlag)
			formdata.set('releaseTypeId', this.tourNoteForm.releaseTypeId)
			formdata.set('views', this.tourNoteForm.views)
			formdata.set('cityId', this.tourNoteForm.cityId)
			formdata.set('provinceId', this.tourNoteForm.provinceId)
			formdata.set('avatarId', this.userAvatarId)
			formdata.set('userId', this.authorId)
			if (this.imageFile.name !== 'File') {
				formdata.set('file', this.imageFile, this.imageFile.name)
			}
			debugger
			axios.post('http://127.0.0.1:8082/tourNote/saveTourNote', formdata).then((res) => {
				debugger
				if (res.data.obj > 0) {
					this.message('恭喜你，提交成功等待官方验证！', 'success')
					this.reload()
					this.tourNoteForm = {}
					this.imageUrl = ''
					this.imageFile = File
				} else {
					this.message('对不起，提交失败！', 'warning')
				}
			})
		},
		// 上传图片前的校验
		beforeAvatarUpload(file) {
			const isPNG = file.type === 'image/png'
			const isJPG = file.type === 'image/jpg'
			const isJPEG = file.type === 'image/jpeg'
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!isJPG && !isPNG && !isJPEG) {
				this.$message.error('上传封面图只能是 JPG/PNG/JPGE 格式!');
			}
			if (!isLt2M) {
				this.$message.error('上传封面图大小不能超过 2MB!');
			}
			this.imageUrl = URL.createObjectURL(file)
			this.imageFile = file
			return false
		},
		// 图片上传后的方法
		handleAvatarSuccess(res, file) {
			debugger
			this.imageUrl = URL.createObjectURL(file.raw);
		},
		// 消息提示
		message (message, type) {
			this.$message({
				message: message,
				type: type
			})
		}
	}
}
</script>

<style scoped>
.body{
	margin-top:140px;
}
.ql-editor{
	height: 240px;
}
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	float:left;
	margin-top: -50px;
}
.avatar-uploader .el-upload:hover {
	border-color: #409EFF;
	
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 140px;
	line-height: 120px;
	text-align: center;
}
.avatar {
	width: 178px;
	height: 100px;
	display: block;
}
.tourNoteImage{
	margin-left: 15%;
	margin-top:-70px;
	float:left;
	margin-left: 1000px;
}
.yangshi{
	margin-top:-55px
}
.editor {
    height: 400px;
  }
</style>
